<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue.js"></script>

		<style type="text/css">
			[v-cloak] {
				display: none;
			}
		</style>
	</head>
	<body>
		<div id="app" v-cloak>
			<p v-show="age>=18">成年</p>
			<p v-show="age<18">未成年</p>
			<hr>
			<p v-if="age>=18">成年</p>
			<p v-if="age<18">未成年</p>
			<hr>
			<p v-if="income<=10">普通阶级</p>
			<p v-else-if="income<=500">中产阶级</p>
			<p v-else="income>500">富豪阶级</p>
			<hr>
			<p v-for="o,i in hobby">{{i}} ==> {{o}}</p>
			<hr>
			<button type="button" v-on:click="show">touch me</button>
			<button type="button" v-on:click="show()">push me</button>
			<button type="button" @click="show()">get me</button>
			<hr>
			<!-- 插值表达式不能用作属性，不写v-bind则值未解析 -->
			<a v-bind:href="site.url">{{site.name}}</a>
		</div>
	</body>
	<script>
		new Vue({
			el: "#app",
			data: {
				age: 18,
				income: 1000,
				hobby: ["抽烟", "喝酒", "烫头"],
				site:{
					name:"菜鸟教程",
					url:"http://runoob.com"
				}
			},
			methods: {
				show: function() {
					console.log("show method");
				}
			}
		});
	</script>

</html>
